.header {
    height: 80px;
    background-color: #fff;

    .header-top {
        height: 40px;
        line-height: 40px;
        text-align: right;
        padding-right: 20px;
        border-bottom: 1px solid #1DA57A;
    }

    .header-bottom {
        display: flex;
        // 定义flex子项在flex容器的当前行的侧轴（纵轴）上的对其方式
        align-items: center;
        height: 40px;

        .header-bottom-left {
            position: relative;
            width: 25%;
            font-size: 20px;
            text-align: center;

            // 如果内层选择器的前面没有&符号，则他被解析为夫选择器的后代；如果有&符号，他就被解析为父元素自身或父元素的伪类。
            // 相当于.header-bottom-left::after
            &::after {
                content: '';
                position: absolute;
                top: 30px;
                right: 50%;
                transform: translateX(50%);
                border-top: 20px solid #fff;
                border-right: 20px solid transparent;
                border-bottom: 20px solid transparent;
                border-left: 20px solid transparent;
            }
        }

        .header-bottom-right {
            width: 75%;
            text-align: right;
            margin-right: 30px;

            img {
                width: 30px;
                height: 20px;
                margin: 0 15px;
            }
        }
    }
}